<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户首页</title>
  <link rel="stylesheet" href="./lib/bootstrap.min.css">
  <link rel="stylesheet" href="./css/main.css">

</head>

<body>

  <!-- 菜单的部分 -->
  <div id="divMenu" class="d-flex justify-content-between align-items-center">

    <div>
      <a href="index.html" class="btn btn-link">请登录</a>
    </div>

    <div class="ps-3">
      <img style="width: 3rem;" id="imgLogo" src="" alt="">
    </div>

    <div class="p-3">

      <div class="btn-group">
        <button id="btnUser" type="button" class="btn btn-danger">用户</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a id="ainfo" class="dropdown-item" href="javascript:void(0)">姓名</a></li>

          <li>
            <hr class="dropdown-divider">
          </li>

          <li><a id="amodify" class="dropdown-item" href="javascript:void(0)">修改信息</a></li>
          <li><a id="ampwd" class="dropdown-item" href="javascript:void(0)">修改密码</a></li>

          <li><a id="aemail" class="dropdown-item" href="javascript:void(0)">绑定邮箱</a></li>

          <li>
            <hr class="dropdown-divider">
          </li>

          <li><a id="alogout" class="dropdown-item" href="javascript:void(0)">安全退出</a></li>
        </ul>
      </div>


    </div>

  </div>

  <!-- 修改密码的部分 -->
  <div id="dialogPwd" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改密码</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="mb-3">
            <input id="txt_oldpwd" type="password" class="form-control" placeholder="原密码">
          </div>

          <div class="mb-3">
            <input id="txt_password" type="password" class="form-control" placeholder="新密码">
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button id="btnPwd" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改附加信息的部分 -->
  <div id="dialogInfo" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改附加信息</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="mb-3">
            <input id="txt_img" class="form-control" placeholder="用户头像地址">
          </div>

          <div class="mb-3">
            <input id="txt_info" class="form-control" placeholder="用户个人简介">
          </div>

          <div class="mb-3">
            <input id="txt_nickname" class="form-control" placeholder="用户姓名">
          </div>

          <div class="mb-3">
            <input id="txt_qq" class="form-control" placeholder="QQ号">
          </div>

          <div class="mb-3">
            <input id="txt_wechat" class="form-control" placeholder="微信">
          </div>

          <div class="mb-3">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="sex" id="sexm">
              <label class="form-check-label" for="sexm">男生</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="sex" id="sexf">
              <label class="form-check-label" for="sexf">女生</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="sex" id="sexn">
              <label class="form-check-label" for="sexn">保密</label>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button id="btnInfo" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>


  <!-- 绑定邮箱的部分 -->
  <div id="dialogEmail" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">绑定邮箱</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="mb-3">
            <input id="txt_email" class="form-control" placeholder="邮箱地址">
          </div>

          <div class="mb-3 d-flex">
            <div>
              <input id="txt_emailcode" class="form-control" placeholder="验证码">
            </div>
            <button id="btn_sendemail" class="btn btn-primary">获取验证码</button>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button id="btnEmail" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

  <hr>
  <!-- 功能菜单的部分 -->
  <div>

    <a href="dept.html">部门管理</a>

  </div>



  <!-- 信息弹出层 -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3">

    <div id="divToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">

      <div class="toast-header">
        <strong class="me-auto">服务器消息</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>

      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>

    </div>

  </div>

  <!-- js导入的部分 -->
  <script src="./lib/bootstrap.bundle.min.js"></script>
  <script type="module" src="./js/main.js"></script>

</body>

</html>